<template>
    <div class="toolbar" ref="toolbar">
      <button class="toolbar-button">底图</button>
      <button class="toolbar-button" @click="$emit('toggleLayerManager')">图层</button>
      <button class="toolbar-button">工具</button>
    </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'

const toolbar = ref(null)

onMounted(() => {
  const el = toolbar.value
  let isDragging = false
  let startX, startY, initialX, initialY

  const onMouseDown = (e) => {
    isDragging = true
    startX = e.clientX
    startY = e.clientY
    initialX = el.offsetLeft
    initialY = el.offsetTop
    document.addEventListener('mousemove', onMouseMove)
    document.addEventListener('mouseup', onMouseUp)
  }

  const onMouseMove = (e) => {
    if (!isDragging) return
    const dx = e.clientX - startX
    const dy = e.clientY - startY
    el.style.left = `${initialX + dx}px`
    el.style.top = `${initialY + dy}px`
  }

  const onMouseUp = () => {
    isDragging = false
    document.removeEventListener('mousemove', onMouseMove)
    document.removeEventListener('mouseup', onMouseUp)
  }

  el.addEventListener('mousedown', onMouseDown)
})


</script>

<style scoped>
.toolbar {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 5px;
  z-index: 1000;
  cursor: move;
}
</style>